im<template>
  <div class="device-info" v-if="hideDialog" >
    <div class="decice-info-header">
      <h2 class="title">设备信息</h2>

      <el-select class="device-select" v-model="deviceType" placeholder="请选择">
        <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <img src="@/assets/images/close.png" alt="" @click="close" />
    </div>
    <div class="device-info-content">
      <div
        v-for="([label, value], idx) in deviceInfoItems"
        :key="idx"
        class="device-info-item"
        v-show="deviceType === '状态信息'"
      >
        <span>{{ label }}：</span>
        <!-- 根据关键字自动上色 -->
        <span
          :class="{
            'blue-str': label.includes('状态') && value !== '离线',
            'gray-str': label.includes('充电') && value === '离线',
            'green-str': label.includes('电量')
          }"
          :title="value"
        >
          {{ value }}
        </span>
      </div>
      <div class="device-info-items" v-show="deviceType === '型架信息'">
        <span class="items-left">{{ Object.keys(currentDeviceInfo?.nestedObjects)[0] }}</span>
        <div class="items-right">
          <div v-for="([label, value], index) in nestedObjects" :key="index">
            <span>{{ label }}：</span>
            <span>{{ value }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getDeviceInfoById } from '@/api/CollectRequest.js'
import replacePropertNameData from '@/views/data/replacePropertNameData.js'
const currentDeviceInfo = ref({
  result: {
  //   壁板类型: '基本型左侧上壁板（文件编号 5331C02000G24）',
  //   部段构型: '高原型',
  //   卡板数量: '123456',
  //   型架电池电量: '60%',
  //   型架电气快插连接状态: '已连接',
  //   型架动力电源开关状态: '供电',
  //   型架状态: '请求装卡板1',
  //   型架当前位置: '型架在型架存放区域位置1',
  //   卡板工装编号: 'test',
  //   架次号: '123',
  //   部段类型: '前机身'
  },
  nestedObjects: {
  //   型架卡板存在状态: {
  //     卡板16: '有卡板',
  //     卡板15: '没有卡板',
  //     卡板14: '没有卡板',
  //     卡板13: '没有卡板',
  //     卡板19: '没有卡板',
  //     卡板18: '没有卡板',
  //     卡板17: '没有卡板',
  //     卡板23: '没有卡板',
  //     卡板22: '没有卡板',
  //     卡板21: '没有卡板',
  //     卡板20: '没有卡板',
  //     卡板27: '没有卡板',
  //     卡板26: '没有卡板',
  //     卡板25: '没有卡板',
  //     卡板24: '没有卡板',
  //     卡板29: '没有卡板',
  //     卡板28: '没有卡板',
  //     卡板3: '',
  //     卡板30: '',
  //     卡板2: '',
  //     卡板5: '',
  //     卡板4: '',
  //     卡板12: '',
  //     卡板11: '',
  //     卡板1: '',
  //     卡板10: '',
  //     卡板32: '',
  //     卡板31: '',
  //     卡板7: '',
  //     卡板6: '',
  //     卡板9: '',
  //     卡板8: ''
  //   }
  }
})
// 下拉数据
const deviceType = ref('状态信息')
const optionList = ref([
  // { label: '状态信息', value: '状态信息' }
  // { label: '型架信息', value: '型架信息' }
])

const hideDialog = ref(false)
async function open (item) {
  hideDialog.value = true
  console.log('item', item)
  let modelId = item.modelId
  if (item.deviceName.includes('型架')) {
    modelId = 'fixtureInfo' + Number(item.modelId.match(/(\d+)$/)[0])
  }
  const { data: res } = await getDeviceInfoById({ modelId })
  if (res.data) {
    currentDeviceInfo.value = { result: {}, nestedObjects: {} }
    optionList.value = [{ label: '状态信息', value: '状态信息' }]

    processData(JSON.parse(res.data.collectValue))
    // console.log('data', currentDeviceInfo.value)

    if (item.deviceName.includes('型架')) {
      optionList.value.push({ label: '型架信息', value: '型架信息' })

      const { data: res2 } = await getDeviceInfoById({ modelId: item.modelId })
      console.log('res2', res2.data)

      processData(JSON.parse(res2.data.collectValue))
    }
  }
}
function close () {
  hideDialog.value = false
  emit('clearListItem')
}
const emit = defineEmits(['clearListItem'])

function processData (data) {
  const { result, nestedObjects } = currentDeviceInfo.value
  const obj = Object.assign({}, ...Object.values(replacePropertNameData))
  for (const [key, value] of Object.entries(data)) {
    if (typeof value === 'object' && value !== null) {
      nestedObjects[key] = value
    } else {
      // 判断obj中的键是否等于key
      if (Object.keys(obj).includes(key)) {
        result[obj[key]] = value
      } else {
        result[key] = value
      }
    }
  }
}

defineExpose({ open, close })
// 更新websocket
watch(() => 'xxx', () => {
  if (hideDialog.value) {
    // 处理数据
  }
})
//
const deviceInfoItems = computed(() => {
  if (!currentDeviceInfo.value?.result) return {}
  return Object.entries(currentDeviceInfo.value?.result)
})
// 卡板排序
const nestedObjects = computed(() => {
  if (!currentDeviceInfo.value?.nestedObjects) return false
  const key = Object.keys(currentDeviceInfo.value?.nestedObjects)[0]
  if (key === undefined) return
  // 过滤键值对
  ['卡板工装编号', '卡板数量', '部段构型', '部段类型', '架次号', '壁板类型'].forEach(key => {
    delete currentDeviceInfo.value.result[key]
  })
  return Object.entries(currentDeviceInfo.value?.nestedObjects[key]).sort((a, b) => {
    const numA = parseInt(a[0].split('卡板')[1])
    const numB = parseInt(b[0].split('卡板')[1])
    return numA - numB
  })
})
</script>

<style lang="less">
.device-info {
  width: 360px;
  position: fixed !important;
  left: 420px;
  top: 0px;
  height: 460px;
  box-sizing: border-box;

  color: #ffffff;
  background-color: rgba(14, 34, 48, 0.7);
  font-size: 14px;
  display: flex;
  flex-direction: column;

  .decice-info-header {
    position: relative;
    height: 35px;
    background: url('@/assets/images/type-label.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;

    h2 {
      font-family: YouShecBiaoTiHei;
      font-weight: 400;
      font-size: 18px;
      margin-left: 30px;
      line-height: 35px;
      color: #ffffff;
      display: inline-block;
      // background: linear-gradient(to bottom, #afdaff 0%, #ffffff 100%);
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      text-shadow: 1px 1px 2px #122e67;
    }
    //  下拉选择框
    .device-select {
      position: absolute;
      top: 5px;
      left: 210px;
      z-index: 999;
      width: 85px;
      .el-select__wrapper {
        // background-color: rgba(75, 137, 255, 0.2);
        background: url('@/assets/homePage/row.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: none;
        .is-focused {
          box-shadow: 0 0 0 1px #ccc;
        }
        .el-select__selected-item {
          color: #ffffff;
        }
      }
    }
    img {
      position: absolute;
      top: -4px;
      right: 0px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        transition: all 0.3s;
        transform: rotate(90deg) scale(1.3);
      }
    }
  }

  .device-info-content {
    padding-right: 5px;
    flex: 1;
    margin: 0 10px 10px 15px;
    margin-bottom: 10px;
    // background-color: red;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(75, 137, 255, 0.2);
    }
    .device-info-item {
      user-select: none;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      align-items: center;
      // height: 36px;
      transition: all 0.3s;
      cursor: pointer;
      margin-bottom: 15px;
      background: url('@/assets/homePage/row.png') no-repeat;
      background-size: 100% 100%;
      > span {
        display: inline-block;
        padding: 9px 0;
        &:nth-child(1) {
          min-width: 45%;
          white-space: nowrap;
          margin-right: 10px;
        }
        &:nth-child(2) {
          // text-overflow: ellipsis;
          // overflow: hidden;
          // white-space: nowrap;
          margin-right: 10px;
        }
      }
      .green-str {
        color: rgba(31, 176, 137, 1);
      }
      .blue-str {
        color: rgba(111, 180, 239, 1);
      }
      .red-str {
        color: rgb(255, 47, 79);
      }
      .gray-str {
        color: #ccc;
      }
    }
    .device-info-items {
      user-select: none;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      // align-items: center;
      // height: 36px;
      transition: all 0.3s;
      cursor: pointer;
      margin-bottom: 15px;
      background: url('@/assets/homePage/row.png') no-repeat;
      background-size: 100% 100%;

      .items-left {
        width: 40px;
        margin-right: 5px;
        margin-top: 5px;
        text-wrap: wrap;
      }
      .items-right {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        font-size: 12px;

        > div {
          width: 50%;
          margin: 5px 0;
          background-color: rgba(25, 56, 79, 0.692);
          padding: 5px 10px;
          > span {
            display: inline-block;
            &:nth-child(1) {
              white-space: nowrap;
              margin-right: 5px;
            }
            &:nth-child(2) {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
